<template>
  <view class="my-property">
    <!-- 头部 -->
    <view class="top-top">
      <view class="topbox">
        <view class="top-oneitem"></view>
        <view class="top-twoitem">
          <view class="top-back" @click="back()">
            <image src="../../static/my/fanhui.png">
            </image>
          </view>
          <view class="top-tit">
            我的账户
          </view>
        </view>
      </view>
    </view>
    <!-- <view style="height: 100rpx;"></view> -->
    <!-- 头部 -->
    <!-- 资源明细 -->
    <view class="white-absolute">
      <view class="white-top">
        资源明细
      </view>
      <view class="white-bottom">
        <view class="white-bottom-left">
          <view class="white-tit">总金额</view>
          <view class="white-num">￥150.00</view>
        </view>
        <view class="white-bottom-right">
          <view class="white-tit">总金额</view>
          <view class="white-num">￥158.45</view>
        </view>
      </view>
    </view>
    <!-- 资源明细 -->
    <view style="height: 100rpx;"></view>
    <!-- 资源明细内容 -->
    <view class="money-con">
      <!-- 下拉按钮 -->
      <view class="con-select">
        <view class="con-select-left">
          <view class="select-tit">
            全部
          </view>
          <view class="select-image">
            <image src="../../static/my/red-select.png" mode=""></image>
          </view>
        </view>
        <view class="con-select-left">
          <view class="select-tit">
            日期
          </view>
          <view class="select-image">
            <image src="../../static/my/red-select.png" mode=""></image>
          </view>
        </view>
      </view>
      <!-- 明细列表-->
      <view class="money-list">
        <view class="list-item">
          <view class="list-item-left">
            <view class="list-item-left-tit">
              转出到银行卡
            </view>
            <view class="list-item-left-time">
              2022-9-16 15:14:33
            </view>
          </view>
          <view class="list-item-right">
            <view class="list-right-num">
              <view class="list-item-left-tit">
                转出到银行卡
              </view>
              <view class="list-item-left-time">
                2022-9-16 15:14:33
              </view>
            </view>
            <view class="list-right-image">
              <image src="../../static/my/more.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 资源明细内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss">
  .my-property {

    // 头部
    .top-top {
      width: 100vw;
      // z-index: 99;
      // position: fixed;
      // top: 0;
      height: 400rpx;
      background-color: #F7292F;
    }

    .topbox {
      width: 90vw;
      margin: 0 auto;

      .top-oneitem {
        width: 100%;
        height: var(--status-bar-height);
      }

      .top-twoitem {
        height: 100rpx;
        width: 100vw;
        display: flex;
        align-items: center;

        .top-back {
          image {
            width: 18rpx;
            height: 36rpx;
            vertical-align: middle;
          }
        }

        .top-tit {
          color: #fff;
          font-size: 40rpx;
          margin-left: 20rpx;
        }
      }
    }

    // 头部
    // 资源明细
    .white-absolute {
      width: 90vw;
      height: 320rpx;
      margin: 0 auto;
      padding: 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 20rpx;
      position: absolute;
      top: 140rpx;
      left: 5vw;

      .white-top {
        font-size: 40rpx;
        text-align: center;
      }

      .white-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;

        .white-bottom-left {
          text-align: center;

          .white-tit {
            color: #4B4B4B;
            font-size: 36rpx;
            margin-bottom: 20rpx;
          }

          .white-num {
            color: #FF2A31;
            font-size: 60rpx;
          }
        }

        .white-bottom-right {
          text-align: center;

          .white-tit {
            color: #4B4B4B;
            font-size: 36rpx;
            margin-bottom: 20rpx;
          }

          .white-num {
            color: #4B4B4B;
            font-size: 60rpx;
          }
        }
      }
    }

    // 资源明细
    // 资源明细内容
    .money-con {
      width: 90vw;
      height: 300rpx;
      margin: 0 auto;
      padding: 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 20rpx;

      // 下拉按钮
      .con-select {
        display: flex;
        justify-content: space-between;

        .con-select-left {
          display: flex;
          border: 1px solid #DEDEDE;
          border-radius: 10rpx;
          padding: 0 20rpx;
          box-sizing: border-box;

          .select-tit {
            color: #FF2A31;
            font-size: 28rpx;
            margin-right: 10rpx;
          }

          .select-image {
            image {
              width: 24rpx;
              height: 12rpx;
            }
          }
        }
      }

      // 明细列表
      .money-list {
        .list-item {
          display: flex;
          justify-content: space-between;

          .list-item-left {
            .list-item-left-tit {
              font-size: 32rpx;
              color: #4B4B4B;
            }

            .list-item-left-time {
              font-size: 24rpx;
              color: #B3B3B3;
            }
          }

          .list-item-right {
            display: flex;

            .list-right-num {
              .list-item-left-tit {
                font-size: 32rpx;
                color: #4B4B4B;
              }

              .list-item-left-time {
                font-size: 24rpx;
                color: #B3B3B3;
              }
            }

            .list-right-image {
              image {}
            }
          }
        }
      }
    }

    // 资源明细内容
  }
</style>